<template>
	<view class="box">
		<view class="cont">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="180rpx">
				<uni-forms-item label="公司名称" name="comName">
					<uni-easyinput type="text" v-model="formData.comName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="店铺名称" name="storeName">
					<uni-easyinput type="text" v-model="formData.storeName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="社会信用代码" name="creditCode">
					<uni-easyinput type="text" v-model="formData.creditCode" placeholder="请输社会信用代码" />
				</uni-forms-item>
				<uni-forms-item label="申请人姓名" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入申请人姓名" />
				</uni-forms-item>
				<uni-forms-item label="申请人电话" name="phone">
					<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入电话" />
				</uni-forms-item>
				<uni-forms-item label="商铺地址" name="storeAddress">
					<uni-easyinput type="text" v-model="formData.storeAddress" placeholder="请输入地址" />
				</uni-forms-item>
				<uni-forms-item label="营业执照" required name="businessLicenseUrl">
					<view class="example-body">
						<uni-file-picker class="pick" :auto-upload="false" @delete='deleteFile(1)' @select="uploadFile($event,1)"
							limit="1" file-mediatype="image"></uni-file-picker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="商铺门牌照" required name="facadeUrl">
					<view class="example-body">
						<uni-file-picker :auto-upload="false" @delete='deleteFile(2)' @select="uploadFile($event,2)"
							limit="1" file-mediatype="image"></uni-file-picker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="商铺内照片" required name="internalUrls">
					<view class="example-body">
						<uni-file-picker :auto-upload="false" @delete='deleteFile($event,3)' @select="uploadFile($event,3)"
							limit="2" :del-icon='false' file-mediatype="image"></uni-file-picker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="桌数" name="deskNum">
					<uni-easyinput type="text" v-model="formData.deskNum" placeholder="请输入桌数" />
				</uni-forms-item>
				<uni-forms-item label="是否省外商家" required name="isOutsideProvince">
					<uni-data-checkbox @change="change" v-model="formData.isOutsideProvince" :localdata="check" />
				</uni-forms-item>
			</uni-forms>
			<button @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getAccessToken
	} from '@/utils/auth'
	import {
		uploadXpPath,
		apply
	} from "@/api/merchants/merchants.js"
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					isOutsideProvince: 'false',
					internalUrls:[],
				},
				check: [{
					text: '是',
					value: 'true'
				}, {
					text: '否',
					value: 'false'
				}],
				rules: {
					// 对name字段进行必填验证
					comName: {
						rules: [{
							required: true,
							errorMessage: '请输入公司名称',
						}]
					},
					storeName: {
						rules: [{
							required: true,
							errorMessage: '请输入店铺名称',
						}]
					},
					storeAddress: {
						rules: [{
							required: true,
							errorMessage: '请输入店铺地址',
						}]
					},
					creditCode: {
						rules: [{
								required: true,
								errorMessage: '请输入社会信用代码',
							},
							// {
							// 	pattern: '/^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g',
							// 	errorMessage: '信用代码错误',
							// }
						]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入申请人姓名',
						}]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入电话',
							},
							{
								pattern: '^[\+]?[0-9]{0,3}[\-]?(13|14|15|16|17|18|19)[0-9]{9}|0\d{2,3}-\d{7,8}|^0\d{2,3}-\d{7,8}-\d{1,4}',
								errorMessage: '电话格式错误',
							}
						]
					},
					businessLicenseUrl: {
						rules: [{
							required: true,
							errorMessage: '请选择营业执照'
						}]
					},
					facadeUrl: {
						rules: [{
							required: true,
							errorMessage: '请选择门牌照'
						}]
					},
					internalUrls: {
						rules: [{
							required: true,
							errorMessage: '请选择店铺内照片'
						}]
					},
					deskNum: {
						rules: [{
							required: true,
							errorMessage: '请输入桌数'
						}]
					},
				}
			}
		},
		methods: {
			// 上传成功
			uploadFile(e, type) {
				let data = {
					filePath: e.tempFilePaths[0]
				}
				uploadXpPath(data).then(response => {
					if (type == 1) {
						this.formData.businessLicenseUrl = response.data
						this.$refs.form.setValue('businessLicenseUrl', this.formData.businessLicenseUrl) //手动将图片值加入到uni-forms的校验
						return false
					}
					if (type == 2) {
						this.formData.facadeUrl = response.data
						this.$refs.form.setValue('facadeUrl', this.formData.facadeUrl) //手动将图片值加入到uni-forms的校验
						return false
					}
					if (type == 3) {
						this.formData.internalUrls.push(response.data)
						this.$refs.form.setValue('internalUrls', this.formData.internalUrls) //手动将图片值加入到uni-forms的校验
						return false
					}
				})
			},
			//删除图片
			deleteFile(e,type) {
				console.log('删除',e,this.formData.internalUrls)
				if (type == 1) {
					this.formData.businessLicenseUrl = ''
					this.$refs.form.setValue('businessLicenseUrl', this.formData.businessLicenseUrl) //手动将图片值加入到uni-forms的校验
					return false
				}
				if (type == 2) {
					this.formData.facadeUrl = ''
					this.$refs.form.setValue('facadeUrl', this.formData.facadeUrl) //手动将图片值加入到uni-forms的校验
					return false
				}
				if (type == 3) {
					this.formData.internalUrls = ''
					this.$refs.form.setValue('internalUrls', this.formData.internalUrls) //手动将图片值加入到uni-forms的校验
					return false
				}
			},
			//选择是否深外
			change(e) {
				this.formData.isOutsideProvince = e.detail.value
			},
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					apply(res).then(response => {
						console.log('传递后',response)
						if(response.data){
							this.$modal.showToast('申请提交成功')
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},500)
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style>
	.box {
		width: 750rpx;
		min-height: 100vh;
	}

	.cont {
		width: 700rpx;
		margin: 30rpx auto;
		padding-bottom: 80rpx;
	}

	.example-body {
		padding: 10px;
		background-color: white;
	}
</style>